<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="copyright" content="All Rights Reserved, Copyright (C) 2021, WP, Ltd."/>

<!--    <title>图书管理系统</title>-->
    <title>BOOK</title>

    <link rel="shortcut icon" href="/images/favicon.png" type="image/x-icon"/>

    <!-- easyui 引入所需的 css -->
    <link rel="stylesheet" type="text/css" href="jquery-easyui/themes/bootstrap/easyui.css">    <!-- 皮肤 -->
    <link rel="stylesheet" type="text/css" href="jquery-easyui/themes/icon.css">

    <!--    页面框架 -->
    <link rel="stylesheet" type="text/css" href="wu/css/wu.css">
    <link rel="stylesheet" type="text/css" href="wu/css/icon.css">

    <!-- 引入所需的 js，注意先后顺序 -->
    <script type="text/javascript" src="jquery-easyui/jquery.min.js"></script>
    <script type="text/javascript" src="jquery-easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="jquery-easyui/easyui-lang-zh_CN.js"></script>

    <!-- 判断是否在线 -->
    <script type="text/javascript" src="js/is-online.js"></script>
</head>

<body class="easyui-layout">

<div class="wu-header" data-options="region:'north',border:false,split:true">
    <div class="wu-header-left">
<!--        <h1>图书管理系统</h1>-->
        <h1>BOOK</h1>
    </div>
    <div class="wu-header-right">
        <p><strong class="easyui-tooltip" title="用户名" th:if="${session.username}"
                   th:text="${session.username}"></strong>，欢迎您！</p>
        <p><a href="/logout">安全退出</a></p>
    </div>
</div>

<div class="wu-sidebar" data-options="region:'west',split:true,border:true,title:'导航菜单'">
    <div class="easyui-accordion" data-options="border:false,fit:true">
        <div style="width:20%;height:100%;overflow:auto;border:1px solid #ccc;float:left">
            <ul id="mainMenu_tree"></ul>
        </div>
    </div>
</div>

<div class="wu-main" data-options="region:'center'">
    <div id="wu-tabs" class="easyui-tabs" data-options="border:false,fit:true">
        <!--        <div title="首页" data-options="href:'temp/layout-1.html',closable:false,iconCls:'icon-tip',cls:'pd3'"></div>-->
    </div>
</div>

<div class="wu-footer" data-options="region:'south',border:true,split:true">
    <h3>&copy; 2021 WP All Rights Reserved</h3>
</div>

<script type="text/javascript" th:inline="javascript">
    var allOpenDialogs = {};

    $(function () {

        $('#wu-tabs').tabs({
            onClose: function(title, index) {
                if (allOpenDialogs[title] !== undefined) {
                    var ids = allOpenDialogs[title].split(",");
                    if (ids.length > 0) {
                        for (var i = 0; i < ids.length; i++) {
                            // 为了防止标签关闭后，再打开时，dialog 重复加载的问题
                            $("#" + ids[i]).dialog("destroy");
                        }
                    }
                }

                // $('#wu-tabs').tabs('close', title);
                // $("#win").window("destroy"); 不管用
            }
        });

        // EasyUI dialog
        // 为了防止标签关闭后，再打开时，dialog 重复加载的问题
        $.extend($.fn.dialog.defaults, {
            onOpen: function () {
                var id = $(this).dialog("options").id;  //窗口Id
                var tab = $("#wu-tabs").tabs("getSelected");
                if (tab) {
                    var title = tab.panel('options').title;
                    if (allOpenDialogs[title] != null && allOpenDialogs[title] !== "") {
                        allOpenDialogs[title] += "," + id;
                    } else {
                        allOpenDialogs[title] = id;
                    }
                }
            }
        });

        initMainMenuTree();
    });

    // 加载菜单树
    function initMainMenuTree() {
        $('#mainMenu_tree').tree({
            // url: '/queryRoleMenusByUserId',
            url: '/queryRoleMenusByUserName',
            queryParams: {
                // id: 1   // 用户 id
                name: [[${session.username}]]
            },
            animate: true,
            width: 200, height: 720,
            loadFilter: function (data) {
                if (data.data) return data.data;
                else return data;
            },
            onLoadSuccess: function (node, data) {
                // if (data.length <= 0) {
                //     return;
                // }
                // $(this).tree("collapseAll");    // 折叠所有节点
            },
            onSelect: function (node) {
                // 目录菜单点击无效
                if (node.children !== undefined) {
                    return;
                }

                var iframe = false;
                addTab(node.text, node.url, node.iconCls, iframe);
            }
        });
    }

    /**
     * Name 添加菜单选项
     * Param title 名称
     * Param href 链接
     * Param iconCls 图标样式
     * Param iframe 链接跳转方式（true为iframe，false为href）
     */
    function addTab(title, href, iconCls, iframe) {
        var tabPanel = $('#wu-tabs');

        if (tabPanel.tabs('exists', title)) {
            tabPanel.tabs('select', title);
            return;
        }

        var content = '<iframe scrolling="auto" frameborder="0"  src="' + href + '" style="width:100%;height:100%;"></iframe>';
        if (iframe) {
            tabPanel.tabs('add', {
                title: title, iconCls: iconCls, fit: true, closable: true,
                content: content
            });
        } else {
            tabPanel.tabs('add', {
                title: title, iconCls: iconCls, fit: true, closable: true,
                href: href
            });
        }
    }

</script>
</body>
</html>